
import React, { memo, createRef, useEffect, useState } from 'react'
import MeModel from '@models/meModel'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import FormIcon from '../../../icons/form.svg'
import { Card, WingBlank, WhiteSpace, Modal } from 'antd-mobile';
import Chart from 'chart.js'

interface PropsInterface {
  meModel: MeModel
}

const canvasRef = createRef<HTMLCanvasElement>()

// @ts-ignore
const AboutMe = (props: PropsInterface) => {

  const [visible, setVisible] = useState(false)
  const [jineng, setJineng] = useState<string[]>([])

  useEffect(() => {
    const data = [
      props.meModel.xcxNum,
      props.meModel.webNum,
      props.meModel.iosNum,
      props.meModel.nodeNum,
      props.meModel.javaNum,
    ]
    var barChartData = {
      labels: ['小程序', 'WEB', 'iOS', 'Node', 'Java'],
      datasets: [{
        label: '技能',
        backgroundColor: ["#fdd8e0", "#fee7d1", "#d3efef", "#cee7fa", "3e6d6ff"],
        borderColor: ['#fb86a2', '#fcb574', '#7becc', '#5dd9d7', '#6cb5ef'],
        borderWidth: 2,
        hoverBackgroundColor: '#fa4971',
        hoverBorderColor: '#fa4971',
        data
      }]
    };

    const ctx = canvasRef.current!.getContext('2d');
    new Chart(ctx!, {
      type: 'bar',
      data: barChartData,
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        onClick(_, x: any[]) {
          const [item] = x
          if (item) {
            setVisible(true)
            switch (item._index) {
              case 0:
                setJineng(props.meModel.xcxShow.split('\n'))
                break
              case 1:
                setJineng(props.meModel.webShow.split('\n'))
                break
              case 2:
                setJineng(props.meModel.iosShow.split('\n'))
                break
              case 3:
                setJineng(props.meModel.nodeShow.split('\n'))
                break
              case 4:
                setJineng(props.meModel.javaShow.split('\n'))
                break
            }
          }
        },
      }
    });
  }, [])

  return (
    <WingBlank size="sm" className={Styles['com-me-skills']}>
      <Card>
        <Card.Header
          title={<span className={Styles['title']}>专业技能</span>}
        />
        <Card.Body>
          <div className={Styles['detail-text']}>{props.meModel.expertise}</div>
          <WhiteSpace />
          <canvas width="360px" height="300px" ref={canvasRef} />
        </Card.Body>
      </Card>
      <Modal
        visible={visible}
        onClose={() => setVisible(false)}
        popup
      >
        <WingBlank className={Styles['jineng-list']}>
          <WhiteSpace />
          {
            jineng.map((item) => {
              return <p className={Styles['jineng-item']} key={item}>{item}</p>
            })
          }
          <WhiteSpace />
        </WingBlank>
      </Modal>
    </WingBlank>
  )
}

export default memo(AboutMe)